<template>
    <div :class="{
        readonly: readonly
    }">
        <a-input-number :size="option.size" :disabled="readonly" :allowClear="option.allowClear" :min="option.min ?? Infinity"
            :max="option.max ?? Infinity" :step="option.step || 1" style="width:100%" :precision="option.precision"
            v-model:value="InputValue" :controls="false" :addon-after="option.unit" />
    </div>
</template>
<script setup>
import { ref, watch, watchEffect } from 'vue';

const emit = defineEmits(['UpdateEvent'])
const props = defineProps({
    option: Object,
    Value: {},
});

const InputValue = ref();

const readonly = ref(false);

watchEffect(() => {
    readonly.value = !!props.option.readonly
})

watch(() => props.Value[props.option.key], val => {
    InputValue.value = val
}, { immediate: true });

watch(InputValue, (val) => {
    emit('UpdateEvent', props.option.key, val);
})


</script>
<style lang="less" scoped>
:deep(.ant-input-number-group-addon:last-child) {
    border-left-width: 0px;
    background-color: transparent;
}
:deep(.ant-input-number) {
    border-right-color: transparent;
}
.readonly {
    :deep(.ant-input-number-group-addon:last-child) {
        background-color: #f5f5f5;
    }
}

:deep(.ant-input-number-focused) {
    border-right-color: #40a9ff;
}
</style>